<template>
  <div class="container">
    <div class="cover_head_img_hover" @click="openExplore" ref="box">
      <i class="add_tag bi bi-plus-lg" alt="" />
      <img class="cover" :src="cover" ref="coverBox" v-show="showImage" />
    </div>
    <input
      type="file"
      name="file"
      class="el-upload__input"
      ref="FileInput"
      @change="FileInputChange"
    />
  </div>
</template>

<script>
import { reactive, ref, onMounted, render } from "vue";
export default {
  setup(props, { emit }) {
    const FileInput = ref({});
    const box = ref();
    var cover = ref();
    const coverBox = ref();
    let showImage = ref(false);
    onMounted(() => {
      // 通过事件绑定打开浏览器
      box.value.addEventListener("click", function () {
        FileInput.value.click();
      });
    });

    function FileInputChange(file) {
      if (FileInput.value.files.length > 0) {
        var reader = new FileReader();
        reader.readAsDataURL(FileInput.value.files[0]);
        reader.onload = (e) => {
          cover = ref(e.target.result);
          showImage.value = true;
          emit("CoverFile", FileInput.value.files[0]);
          coverBox.value.setAttribute("src", e.target.result);
        };
      } else {
        console.log("没有上传任何图片");
      }
    }
    return { FileInput, box, FileInputChange, cover, coverBox, showImage };
  },
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
}
.el-upload__input {
  display: none;
}
.add_tag {
  font-size: 2rem;
}
.cover_head_img_hover {
  border: 1px dashed gray;
  padding: 1.5rem 4rem;
  border-radius: 0.5rem;
  color: gray;
  background-color: rgb(253, 253, 253);
  position: relative;
  overflow: hidden;
}
.cover_head_img_hover:hover {
  background-color: #d9ecff;
}
.cover {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.3s;
}
.cover:hover {
  transform: scale(1.1, 1.1);
  opacity: 0.3;
}
</style>
